<script setup lang="ts">
import { reactive, computed } from 'vue'
import type { TabberList } from '@/types/data'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const tabbarData = reactive<TabberList>([{
  name: "面经",
  path: "/index",
  icon: "home-o"
}, {
  name: "收藏",
  path: "/collect",
  icon: "star-o"
}, {
  name: "喜欢",
  path: "/like",
  icon: "like-o"
}, {
  name: "我的",
  path: "/my",
  icon: "friends-o"
}])
const showTitle = computed(() => {
  const obj = tabbarData.find(item => item.path === route.path)
  return obj?.name || "标题"
})
</script>
  
<template>
  <van-nav-bar @click-left="router.back()" v-if="route.path !== '/index' && route.path !== '/my'" :title="showTitle"
    left-text="返回" left-arrow fixed />
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" />
    </keep-alive>
  </router-view>
  <van-tabbar route v-if="!/^\/article\//.test(route.path)">
    <van-tabbar-item v-for="(item, index) in tabbarData" :key="index" :icon="item.icon" :to="item.path">
      {{
      item.name
      }}
    </van-tabbar-item>
  </van-tabbar>

</template>
  
<style scoped>

</style>
  